<template>
  <div id="stuScore">
    <globle-linear-border>
      <el-card class="searchBox">
        <el-form :inline="true" label-width="68px">
          <el-form-item label="姓名">
            <el-input v-model="pageQuery.otherParams.stuName" placeholder="输入学生姓名搜索" clearable @blur="getTableData" @clear="getTableData" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="pageQuery.otherParams.stuSex" placeholder="选择学生性别搜索" clearable @change="getTableData">
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </globle-linear-border>

    <globle-linear-border style="margin-top: 20px">
      <el-card class="mainBox">
        <span v-if="tableData.rows">
          <el-table :data="tableData.rows" :border="true" stripe cell-class-name="table-cell" header-cell-class-name="table-header-cell">
            <el-table-column property="studentId" label="学号" width="140" />
            <el-table-column property="stuName" label="姓名" />
            <el-table-column property="javaBase" label="Java基础">
              <template #default="scope">
                <span :class="scoreClass(scope.row.javaBase)">{{ blank(scope.row.javaBase) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="dataBase" label="数据库与Oracle" width="130">
              <template #default="scope">
                <span :class="scoreClass(scope.row.dataBase)">{{ blank(scope.row.dataBase) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="projectOne" label="项目一">
              <template #default="scope">
                <span :class="scoreClass(scope.row.projectOne)">{{ blank(scope.row.projectOne) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="staticWeb" label="静态网页">
              <template #default="scope">
                <span :class="scoreClass(scope.row.staticWeb)">{{ blank(scope.row.staticWeb) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="dynamicWeb" label="动态网页">
              <template #default="scope">
                <span :class="scoreClass(scope.row.dynamicWeb)">{{ blank(scope.row.dynamicWeb) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="projectTwo" label="项目二">
              <template #default="scope">
                <span :class="scoreClass(scope.row.projectTwo)">{{ blank(scope.row.projectTwo) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="javaDatabasePro" label="Java与Oracle高级" width="150">
              <template #default="scope">
                <span :class="scoreClass(scope.row.javaDatabasePro)">{{ blank(scope.row.javaDatabasePro) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="projectThree" label="项目三">
              <template #default="scope">
                <span :class="scoreClass(scope.row.projectThree)">{{ blank(scope.row.projectThree) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="finalExam" label="期末考试">
              <template #default="scope">
                <span :class="scoreClass(scope.row.finalExam)">{{ blank(scope.row.finalExam) }}</span>
              </template>
            </el-table-column>
            <el-table-column property="remarks" label="备注" show-overflow-tooltip width="100">
              <template #default="scope">{{ blank(scope.row.remarks) }}</template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-model:currentPage="pageQuery.pageParams.pageNum"
            v-model:page-size="pageQuery.pageParams.pageSize"
            :page-sizes="pageSizeOption"
            :background="true"
            :small="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalSize"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
          />
        </span>
      </el-card>
    </globle-linear-border>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElTable } from 'element-plus';
import { computed, onMounted, reactive, ref } from 'vue';
import { useAPI } from '../../../request/api';
import { useUserStore } from '../../../store/user';
import { APIData, IPageParams, IPageRes, IStuScore } from '../../../type';
const api = useAPI();
const store = useUserStore();

onMounted(() => {
  getTableData();
});

// store.$subscribe((args: any, states) => {
//   if (pageQuery.otherParams.stage != states.currentStage) {
//     pageQuery.otherParams.stage = states.currentStage;
//     getTableData();
//   }
// });

const blank = computed(() => (str: string) => {
  if (str === null || str === '') return '无';
  else return str;
});
const scoreClass = computed(() => (score: number) => {
  if (score < 60) return 'failScore';
  else if (score >= 60 && score <= 70) return 'warningScore';
  else if (score > 70) return 'goodScore';
});

const tableData = ref({} as IPageRes);
const pageSizeOption = [5, 10, 15, 20];
const pageQuery = reactive<IPageParams>({
  otherParams: {
    stuName: '',
    stuSex: '',
    stage: store.currentStage,
    department: store.currentDepartment,
  },
  pageParams: {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: '',
  },
});

//分页大小
const onSizeChange = (val: number) => {
  pageQuery.pageParams.pageSize = val;
  getTableData();
};
//分页页码
const onCurrentChange = (val: number) => {
  pageQuery.pageParams.pageNum = val;
  getTableData();
};

const getTableData = async () => {
  const res: APIData = await api.findPage(pageQuery, store.role, 'stuScore');
  if (res.code === 200) tableData.value = res.data;
  else ElMessage.error(res.message);
  // console.log('tableData.value', tableData.value);
};
</script>

<style lang="scss" scoped>
#stuScore {
  .failScore {
    color: var(--danger-color);
  }
  .warningScore {
    color: var(--warning-color);
  }
  .goodScore {
    color: var(--success-color);
  }

  height: 100%;
  .searchBox {
    &-item {
      margin-right: 10px;
    }
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
    }
    section {
      display: flex;
    }
    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }
  .mainBox {
    // margin-top: 20px;

    :deep(.el-checkbox__inner) {
      border: 1px solid var(--font-color);
      background-color: var(--main-color);
      transition: background 0.3s ease;
    }
  }
}
</style>
